import { defineComponent } from "vue";

export default defineComponent({
  name: "svg-icon",
  props: {
    size:{
      type:Number,
      default: 100
    },
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
    },
  },
  computed: {
    iconName(): string {
      return `#icon-${this.iconClass}`;
    },
    svgClass(): string {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
  },

  render() {
    return (
      <svg style={{
        width: `${this.size}px`,
        height: `${this.size}px`,
        verticalAlign:` -0.15em`,
        fill: `currentColor`,
        overflow: `hidden`,
      }} class={this.svgClass} aria-hidden="true">
        <use xlinkHref={this.iconName} aria-hidden="true"></use>
      </svg>
    );
  },
});
